<template>
  <div class="echarts_box">
    <div class="echarts" ref="echarts_box"></div>

    <!---------------------- 无数据是显示 ---------------------->
    <!-- <Nodata class="Nodata" v-show="data.length == 0"></Nodata> -->
  </div>
</template>


<script>
import { mapState, mapActions, mapGetters } from "vuex";
import fontSize from "@/modules/fontSize";
export default {
  props: {
    number: {
      // 返回的数据
      type: Array | Object,
      default: function () {
        return [0, 0];
      },
    },
    label: {
      type: String,
      default: "",
    },
    // data: {
    //   // 返回的数据
    //   type: Array | Object,
    //   default: function () {
    //     return [];
    //   },
    // },
  },
  computed: {},
  watch: {
    // legendData: "drawLine", // 数值变化是更新图表
  },
  data() {
    return {
      temp: 0,
    };
  },
  watch: {
    number: "drawLine", // 数值变化是更新图表
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      try {
        this.$nextTick(() => {
          var _this = this;
          let num = (this.number[0] / this.number[1]) * 100;
          num = num.toFixed(1);
          var myChart = _this.$echarts.init(_this.$refs.echarts_box);
          var demoData = {
            name: "城镇化率",
            value: 60,
          };

          let option = {
            backgroundColor: "#222939",
            title: {
              text: "{num|" + demoData.value + "%}",
              x: "50%",
              y: "53%",
              textAlign: "center",
              textStyle: {
                rich: {
                  num: {
                    fontWeight: "500",
                    color: "#F8F8FA",
                    fontFamily: "微软雅黑",
                    fontSize: fontSize.fontSize(0.11), //自适应大小,
                  },
                },
              },
            },
            series: [
              {
                type: "gauge",
                radius: "90%", // 1行3个
                center: ["50%", "70%"],
                splitNumber: 10,
                // min: 0,
                max: 100,
                startAngle: 180,
                endAngle: 0,
                z: 99,
                // 线
                axisLine: {
                  lineStyle: {
                    width: 1,
                    color: [[1, "rgba(255,255,255,0)"]],
                  },
                  detail: {
                    formatter: "{value}",
                  },
                  data: [
                    {
                      value: 50,
                      name: "SCORE",
                    },
                  ],
                },
                //刻度标签。
                axisTick: {
                  show: true,
                  splitNumber: 6, //刻度的段落数
                  lineStyle: {
                    color: "#02C2A2",
                    width: 2, //刻度的宽度
                    shadowColor: "#67FFFC",
                    shadowBlur: 2,
                  },
                  length: 2, //刻度的长度
                },
                splitLine: {
                  //文字和刻度的偏移量
                  show: true,
                  length: -10, //长度
                  lineStyle: {
                    color: "#02C2A2",
                    width: 4,
                  },
                },
                // //刻度线文字
                axisLabel: {
                  show: true,
                  color: "#02C2A2",
                  fontSize: 16,
                  distance: -30,
                },
                data: [
                  {
                    value: demoData.value,
                    name: "SCORE",
                    itemStyle: {
                      color: "#02C3A2",
                    },
                  },
                ],
                pointer: {
                  show: true,
                  length: "12%",
                  radius: "50%",
                  width: 10, //指针粗细
                  offsetCenter: [0, -273],
                },
                detail: {
                  show: false,
                },
                title: {
                  // 仪表盘标题。
                  show: false,
                },
              },
              {
                name: demoData.name,
                type: "pie",
                radius: ["65%", "77%"],
                center: ["50%", "70%"],
                startAngle: 180,
                endAngle: 0,
                color: [
                  {
                    type: "linear",
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: "transparent", // 0% 处的颜色
                      },
                      {
                        offset: 0.5,
                        color: "#64BDEB", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#33A391", // 100% 处的颜色
                      },
                    ],
                  },
                  "transparent",
                ],
                hoverAnimation: true,
                legendHoverLink: false,
                z: 10,
                labelLine: {
                  normal: {
                    show: false,
                  },
                },
                data: [
                  {
                    value: (50 * (demoData.value + 10)) / 100,
                  },
                  {
                    value: 100 - (50 * (demoData.value + 10)) / 100,
                  },
                ],
              },
              {
                type: "pie",
                hoverAnimation: false,
                label: {
                  show: false,
                },
                center: ["50%", "70%"],
                radius: ["0%", "60%"],
                startAngle: 180,
                data: [
                  {
                    value: 100,
                    itemStyle: {
                      normal: {
                        color: {
                          type: "radial",
                          x: 0.5,
                          y: 0.5,
                          r: 0.5,
                          colorStops: [
                            { offset: 0, color: "#00C2EB" },
                            { offset: 1, color: "#094461" },
                          ],
                        },
                        opacity: 0.2,
                      },
                    },
                  },
                  {
                    value: 100,
                    color: "transparent",
                  },
                ],
              },
            ],
          };

          myChart.setOption(option);
          myChart.off("click");
          /* 点击事件 */
          myChart.on("click", (params) => {});
          /* 大小自适应 */
          window.addEventListener("resize", function () {
            myChart.resize();
          });
          myChart.resize();
        });
      } catch (e) {
        console.log(e);
        // 错误处理代码片段
      }
    },
  },
};
</script>


<style lang="scss" scoped>
.echarts_box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0.5vh 0 0.3vh 0;
  position: relative;
  justify-content: space-between;
  .echarts {
    width: 100%;
    height: 80%;
  }
  .label2 {
    background: url("../../../assets/images/echarts/yuanjiao.png") center
      no-repeat;
    background-size: 50% 100%;

    height: 25px;
    width: 100%;
    font-size: 13px;
    font-family: Source Han Sans CN, Source Han Sans CN-Light;
    font-weight: 300;
    text-align: center;
    color: #03e6f5;
    line-height: 20px;
    margin-top: 3px;
    line-height: 24px;
  }
}
</style>